<template>
  <view class="more-container">
    <view class="empty-tip" v-if="moreData.length === 0">
      <image class="empty-icon" src="/static/data-empty.png" mode="aspectFit"></image>
      <text class="empty-text">暂无更多数据</text>
    </view>
    
    <view 
      class="more-item" 
      v-for="(item, index) in moreData" 
      :key="index"
      @tap="viewMoreDetail(item)"
    >
      <view class="more-content">
        <view class="more-title">{{ item.title }}</view>
        <view class="more-subtitle">{{ item.content }}</view>
        <view class="more-date">{{ formatDate(item.publishTime) }}</view>
      </view>
      <view class="more-arrow">
        <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import UserArticleApi from '@/sheep/api/article/user_article';

const props = defineProps({
  contactId: {
    type: String,
    default: ''
  },
  currentTab: {
    type: Number,
    default: 0
  },
  tabIndex: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['refresh', 'longpress']);

// 添加长按处理函数
const onLongPress = (item) => {
  emit('longpress', item, 'more');
};

// 笔记数据列表
const moreData = ref([]);

// 格式化日期
const formatDate = (timestamp) => {
  if (!timestamp) return '';
  
  try {
    const date = new Date(Number(timestamp));
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    
    return `${year}-${month}-${day} ${hours}:${minutes}`;
  } catch (error) {
    console.error('日期格式化错误:', error, timestamp);
    return '';
  }
};

// 查询文章列表
const queryArticleList = async () => {
  if (!props.contactId) {
    console.error('联系人ID不存在，无法加载数据');
    return;
  }
  
  console.log('更多tab 开始加载数据 - contactId:', props.contactId);
  
  try {
    const res = await UserArticleApi.queryArticleList({
      businType: 'CONTACT_REMARK',
      categoryType: 'CONTACT_REMARK',
      businId: props.contactId
    });
    
    uni.hideLoading();
    
    if (res.code === 0 && res.data) {
      moreData.value = res.data;
      console.log('更多tab 数据加载成功，共', moreData.value.length, '条记录');
    } else {
      console.error('获取文章列表失败:', res.msg);
      moreData.value = [];
    }
  } catch (error) {
    uni.hideLoading();
    console.error('获取文章列表失败:', error);
    moreData.value = [];
  }
};

// 查看详情
const viewMoreDetail = (item) => {
  uni.navigateTo({
    url: `/pages/contact/note-edit?id=${item.id}&contactId=${props.contactId}&mode=edit`,
    events: {
      noteUpdated: () => {
        queryArticleList();
        emit('refresh');
      }
    }
  });
};

// 使用 onShow 生命周期钩子
onShow(() => {
  if (props.currentTab === props.tabIndex) {
    queryArticleList();
  }
});

// 暴露方法给父组件调用
defineExpose({
  queryArticleList
});

</script>

<style lang="scss" scoped>
.more-container {
  padding: 20rpx 0;
  background-color: #f5f5f5;
  min-height: 100%;
}

.more-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  margin: 0 20rpx 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.more-content {
  flex: 1;
}

.more-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}

.more-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 12rpx;
  line-height: 1.4;
}

.more-date {
  font-size: 12px;
  color: #999;
}

.more-arrow {
  margin-left: 20rpx;
}

/* 空数据提示 */
.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>